<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { HomeOutlined, SearchOutlined, CloudOutlined } from '@ant-design/icons-vue';

const router = useRouter();
const route = useRoute();
const selectedKeys = ref<string[]>(['home']);

const menuItems = [
  { key: 'home', label: '首页', icon: HomeOutlined, path: '/' },
  { key: 'transfer', label: '文件传输', icon: HomeOutlined, path: '/transfer' },
  { key: 'discovery', label: '设备发现', icon: SearchOutlined, path: '/discovery' },
  { key: 'cloud', label: '云存储', icon: CloudOutlined, path: '/cloud' },
];

watch(() => route.name, (newValue) => {
  if (typeof newValue === 'string') {
    selectedKeys.value = [newValue];
  }
});
</script>

<template>
  <a-layout class="container">
    <a-layout-sider theme="light" width="240" class="sidebar">
      <a-menu
        theme="light"
        mode="inline"
        v-model:selectedKeys="selectedKeys"
      >
        <a-menu-item 
          v-for="item in menuItems" 
          :key="item.key"
          @click="router.push(item.path)">
          <template #icon>
            <component :is="item.icon" />
          </template>
          {{ item.label }}
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout-content class="main-content">
      <a-config-provider>
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </a-config-provider>
    </a-layout-content>
  </a-layout>
</template>

<style>
:root {
  --primary-color: #1890ff;
  --bg-light: #ffffff;
  --bg-gray: #f5f5f5;
  --text-primary: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.65);
  --sidebar-width: 200px;
  --header-height: 60px;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-light);
  color: var(--text-primary);
  overflow: hidden;
}

#app {
  width: 100vw;
  height: 100vh;
}

.container {
  width: 100%;
  height: 100%;
}

.sidebar {
  background: var(--bg-light) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.brand {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary-color);
}

.main-content {
  padding: 2rem 3rem;
  background: var(--bg-light);
  position: relative;
  overflow: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.ant-layout {
  background: var(--bg-light) !important;
}

.ant-menu {
  background: var(--bg-light) !important;
}

.ant-menu-item {
  margin: 2px 0 !important;
}

.ant-menu-item:hover {
  background: var(--bg-gray) !important;
}

.ant-menu-item-selected {
  background: var(--primary-color) !important;
  color: #fff !important;
}
</style>